<template>
  <div id="login_form_node">
    <div style="display: none; height: 1px;">
      <div class="form_row">
        <label>用户名：</label>
        <span>{{ account }}</span>
      </div>
      <div class="form_row">
        <label>密码：</label>
        <span>{{ password }}</span>
      </div>
    </div>
    <form id="login_form">
      <h2>用户登陆</h2>
      <div class="form_row">
        <label>用户名：</label>
        <span><input v-bind:id="account" v-model="account" /></span>
      </div>
      <div class="form_row">
        <label>密码：</label>
        <label><input v-bind:id="password" type="password" v-model="password" /></label>
      </div>
      <div class="form_row">
        <el-button v-on:click="doReset">重置</el-button>
        <el-button v-on:click="doSubmit"><el-icon><EditPen /></el-icon>提交</el-button>
      </div>
    </form>
  </div>

  <div id="vue_src">

    <p>
      with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
      seconds, you can also override this
    </p>
    <el-icon :size="20">
      <Edit />
    </el-icon>
    <el-icon color="#409EFC" class="no-inherit">
      <Share />
    </el-icon>
    <el-icon>
      <Delete />
    </el-icon>
    <el-icon class="is-loading">
      <Loading />
    </el-icon>
    <el-button type="primary">
      <el-icon style="vertical-align: middle">
        <Search />
      </el-icon>
      <span style="vertical-align: middle"> Search </span>
    </el-button>

  </div>
</template>
  
<script>
export default {
  name: "login",
  data() {
    return {
      account: "",
      password: ""
    }
  },
  methods: {
    doReset: function () {
      console.info("login form do Reset...");

      alert("login form do Reset...");
      return {
        account: "",
        password: ""
      }
    },
    doSubmit: function () {
      console.info("submit...\n account:" + this.account + "\npassword:" + this.password);
      alert("submit...\n account:" + this.account + "\npassword:" + this.password);

    }
  }
}
</script>
  
<style scoped>
.form_row button {
  margin: 3px;
  width: 106px;
  height: 28px;
}

input[type="text"] {
  border: rgb(54, 152, 156);
  height: 22px;
}

input[type="button"] {
  border: rgb(54, 152, 156);
  height: 26px;
  width: 90%;
}

input:focus {
  background-color: rgb(251, 251, 251);
  border: aqua;
  height: 22px;
}

.form_row label {
  text-align: right;
  font-weight: bold;
  width: 168px;
  float: left;
}

.form_row span {
  text-align: left;
  height: 100%;
  width: 268px;
  float: left;
}

.form_row {
  width: 100%;
  height: 2em;
  padding: 3px;
  line-height: 2em;
}

#login_form {
  width: 60%;
  height: 60%;
  margin: 20px auto auto;
  border-right: #2c3e50 2px;
}

#vue_src {
  float: left;
  width: 50%;
  height: 100%;

}

#login_form_node {
  float: left;
  width: 50%;
  height: 100%;
  border: #666666;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  height: 100%;
}
</style>
  